<template>
  <TabPane
    :name="name"
    :label="label"
    class="fav-box"
  >
    <Row>
      <i-col span="6">
        <Menu
          theme="dark"
          :active-name="activedMenu"
          @on-select="handleMenuSelected"
        >
          <MenuItem
            name="artists"
          >
            <i class="material-icons">person</i>
            歌手
          </MenuItem>
          <MenuItem
            name="albums"
          >
            <i class="material-icons">album</i>
            专辑
          </MenuItem>
        </Menu>
      </i-col>

      <i-col span="18">
        <AlbumsList
          v-if="activedMenu === 'albums'"
          :user-id="userId"
        />
        <ArtistsList
          v-if="activedMenu === 'artists'"
          :user-id="userId"
        />
      </i-col>
    </Row>
  </TabPane>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import AlbumsList from '../compoments/AlbumsList.vue'
import ArtistsList from '../compoments/ArtistsList.vue'

type Names = 'artists' | 'albums'

@Component({
  name: 'FavsTab',
  components: {
    AlbumsList,
    ArtistsList
  }
})
export default class extends Vue {
  private readonly name = 'fav'
  private readonly label = '收藏'
  @Prop() userId!: number
  private activedMenu: Names = 'artists'

  get params (): CreateQueryParams {
    return {
      search: {
        'belongsToUser.id': this.userId
      },
      join: [{
        field: 'belongsToUser'
      }]
    }
  }

  private handleMenuSelected (name: Names) {
    this.activedMenu = name
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.fav-box {
  .fav-list {
    padding-right: 16px;
    .fav-item {
      &.active {
        background-color: lighten(@dark-bg-color, 10%)
      }
      i.fav {
        color: @red;
      }
    }
  }

}

</style>
